/**
 * 学习目标：非受控组件和受控组件
 * 区别：
 *  1. 👍受控组件：指表单元素的值，由state控制
 *  2. 👎非受控组件：指表单元素的值，由DOM本身管理
 *
 *
 * 受控组件作用：收集用户输入的数据
 *  🔔优点：更符合数据驱动的思想，获取用户输入的数据更便捷
 *
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  getInput = () => {
    const input = document.querySelector('input');
    console.dir(input.value);
  };
  render() {
    return (
      <div>
        <input type="text" id="di1" />
        <input type="text" id="di2" />
        <input type="text" id="di3" />
        <input type="text" id="di4" />
        <input type="text" id="di5" />
        <button onClick={this.getInput}>点我获取 input 的值</button>
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
